<!DOCTYPE html >
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Freedom Boot 后台管理系统</title>
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link th:href="@{/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link th:href="@{/assets/css/nifty.min.css}" rel="stylesheet">
    <!--Demo [ DEMONSTRATION ]-->
    <link th:href="@{/assets/css/nifty-login.min.css}" rel="stylesheet">
    <!--Magic Checkbox [ OPTIONAL ]-->
    <link th:href="@{/assets/css/magic-check.min.css}" rel="stylesheet">
    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link th:href="@{/assets/css/pace.min.css}" rel="stylesheet">
    <!-- Layer  Stylesheet-->
    <link rel="stylesheet" th:href="@{/plugins/layer/theme/default/layer.css}">
</head>

<body>
<div id="container" class="cls-container">
    <div id="bg-overlay" class="bg-img"></div>
    <div class="cls-content">
        <div class="cls-content-sm panel">
            <div class="panel-body">
                <div class="mar-ver pad-btm">
                    <h3 class="h4 mar-no" th:text="#{login.title}">Account Login</h3>
                    <p class="text-muted" th:text="#{login.tip}">Sign In to your account</p>
                </div>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" id="username" th:placeholder="#{login.username}" autofocus>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="password" th:placeholder="#{login.password}">
                    </div>
                    <div class="form-group">
                       <div class="row">
                           <div class="col-xs-6">
                               <input type="text" class="form-control" id="verifyCode" th:placeholder="#{login.verifyCode}">
                           </div>
                           <div class="col-xs-6">
                               <img th:src="@{/core/login/captcha.jpg}" alt="换一张" id="verify-code-img" style="cursor: pointer">
                           </div>
                       </div>
                    </div>
                    <!--<div class="checkbox pad-btm text-left">-->
                        <!--<input id="rememberMe" class="magic-checkbox" type="checkbox">-->
                        <!--<label for="rememberMe" th:text="#{login.rememberMe}">Remember me</label>-->
                    <!--</div>-->
                    <button id="login-btn" class="btn btn-primary btn-lg btn-block" type="button" th:text="#{login.btn}">Sign In</button>
                </form>
            </div>

            <div class="pad-all">
                <a href="#" class="btn-link mar-rgt" th:text="#{login.forgetpassword}">忘记密码</a>
                <a href="/?lang=en_US">English(US)</a> | <a href="/?lang=zh_CN">简体中文</a></br>

                <div class="media pad-top bord-top">
                    <div class="pull-right">
                        <a href="#" class="pad-rgt"><i class="freedom-psi-facebook icon-lg text-primary"></i></a>
                        <a href="#" class="pad-rgt"><i class="freedom-psi-twitter icon-lg text-info"></i></a>
                        <a href="#" class="pad-rgt"><i class="freedom-psi-google-plus icon-lg text-danger"></i></a>
                    </div>
                    <div class="media-body text-left"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="freedom-bg">
        <div id="freedom-bg-list">
            <div class="freedom-loading"><i class="psi-repeat-2"></i></div>
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-1.jpg}" alt="Background Image">
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-2.jpg}" alt="Background Image">
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-3.jpg}" alt="Background Image">
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-4.jpg}" alt="Background Image">
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-5.jpg}" alt="Background Image">
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-6.jpg}" alt="Background Image">
            <img class="chg-bg" th:src="@{/assets/picture/bg-img-7.jpg}" alt="Background Image">
        </div>
    </div>

</div>
<!--jQuery [ REQUIRED ]-->
<script type="text/javascript" th:src="@{/plugins/jquery.min.js}"></script>
<script th:src="@{/assets/js/pace.min.js}"></script>
<!--BootstrapJS [ RECOMMENDED ]-->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!--NiftyJS [ RECOMMENDED ]-->
<script th:src="@{/assets/js/nifty.min.js}"></script>
<!--Background Image -->
<script th:src="@{/assets/js/bg-images.js}"></script>
<!-- Layer -->
<script type="text/javascript" th:src="@{/plugins/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/plugins/jsencrypt/jsencrypt.min.js}"></script>
<script type="text/javascript" th:src="@{/business/login.js}"></script>
</body>
</html>
